<script lang="tsx" name="Radio">
  /**
   *  title TODO 待扩展
   * @description: description
   * @author SunYanMing<95317356@qq.com>
   * @property {Boolean} props desc info
   * @example <Radio />
   * @date 2023/11/16
   */

  import { defineComponent, ref, watch, toValue } from 'vue';

  export default defineComponent({
    name: 'Radio',

    inheritAttrs: true,
    props: {
      modelValue: {
        type: [String, Number, Array],
        default: undefined,
      },
      options: {
        type: Array,
        default: () => [],
      },

      labelField: {
        type: String,
        default: 'label',
      },
      valueField: {
        type: String,
        default: 'value',
      },
      childrenField: {
        type: String,
        default: 'children',
      },
    },

    emits: ['update:modelValue'],
    setup(props, cxt) {
      const value = ref(props.modelValue);
      watch(
        () => value.value,
        (val) => {
          cxt.emit('update:modelValue', toValue(val));
        },
        {
          immediate: true,
        },
      );
      return {
        value,
      };
    },
  });
</script>
<template>
  <el-tree
    ref="treeRef"
    :data="options"
    show-checkbox
    default-expand-all
    highlight-current
    v-bind="{ ...$props, ...$attrs }"
  >
    <template #[key]="data" v-for="key in Object.keys($slots)">
      <slot :name="key" v-bind="data || {}"></slot>
    </template>
  </el-tree>
</template>

<style scoped></style>
